<template>
    <div id="mapView" :style="style">
    </div>
</template>
<script>
export default {
    data() {
        return {
            style: {
                width: '100%',
                height: '100%'
            }
        }
    },
    props: {	//里面存放的也是数据，与data里面的数据不同的是，这里的数据是从其他地方得到的数据
        height: {
            type: Number,
            default: 300
        },
        longitude: {},	//定义经度
        latitude: {}	//定义纬度
    },
    mounted() {
        var map = new BMap.Map("mapView");
        var point = new BMap.Point(this.longitude, this.latitude);
        map.centerAndZoom(point, 12);
        var marker = new BMap.Marker(point);// 创建标注
        map.addOverlay(marker);
        map.enableScrollWheelZoom(true);

        //聚合点
        var max = 100000;
        var myMarkers = [];
        var marker = null;
        var i = 0;
        var sContent = "";
        for (i; i < max; i++) {
            (function(j) {
                sContent =
                    "<div style='width:500px;height:200px;overflow-y:scroll'>" +
                        "<h4 style='width:100%;text-align:center;margin-bottom:15px'>站点名称" + j + "</h4>" +
                        "<p>地址:广东省广州市天河区华景新城" + j + "</p>" +
                        "<p>联系电话:" + j + "</p>" +
                        "<div>" +
                            "<p>门锁1名称" + "</p>" +
                            "<div style='overflow:hidden'>" +
                                "<img style='float:left;margin:4px;width:90px' id='imgDemo' src='http://lbsyun.baidu.com/jsdemo/img/tianAnMen.jpg' title='天安门' alt='图片'/>" +
                                "<ul style='float:left;margin-left:30px;list-style:none'>" +
                                    "<li>启用状态</li>" +
                                    "<li>安装状态</li>" +
                                    "<li>门状态</li>" +
                                    "<li>末次开门记录</li>" +
                                "</ul>" +
                                "<ul style='float:left;margin-left:50px;list-style:none'>" +
                                    "<li>已启用/未启用</li>" +
                                    "<li>未安装/未上线/已上线</li>" +
                                    "<li>告警/打开/关闭/报修</li>" +
                                    "<li>张三 yyyy-MM-dd HH:mm:ss</li>" +
                                "</ul>" +
                            "</div>" +
                        "</div>" +
                        "<div>" +
                            "<p>门锁2名称" + "</p>" +
                            "<div style='overflow:hidden'>" +
                                "<img style='float:left;margin:4px;width:90px' id='imgDemo' src='http://lbsyun.baidu.com/jsdemo/img/tianAnMen.jpg' title='天安门' alt='图片'/>" +
                                "<ul style='float:left;margin-left:30px;list-style:none'>" +
                                    "<li>启用状态</li>" +
                                    "<li>安装状态</li>" +
                                    "<li>门状态</li>" +
                                    "<li>末次开门记录</li>" +
                                "</ul>" +
                                "<ul style='float:left;margin-left:50px;list-style:none'>" +
                                    "<li>已启用/未启用</li>" +
                                    "<li>未安装/未上线/已上线</li>" +
                                    "<li>告警/打开/关闭/报修</li>" +
                                    "<li>张三 yyyy-MM-dd HH:mm:ss</li>" +
                                "</ul>" +
                            "</div>" +
                        "</div>"
                    "</div>";
                // 创建信息窗口对象
                var infoWindow = new BMap.InfoWindow(sContent);
                marker = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
                myMarkers.push(new BMap.Marker(marker)); 
                myMarkers[j].addEventListener('click', function() {
                    this.openInfoWindow(infoWindow);
                    document.getElementById('imgDemo').onload = function() {
                        //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                        infoWindow.redraw();
                    }
                });
                //定点跳动
                myMarkers[j].setAnimation(BMAP_ANIMATION_BOUNCE);
            })(i);
        }
        //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
        var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: myMarkers });

        //根据ip地址定位
        function myFun(result) {
            var cityName = result.name;
            map.setCenter(cityName);
            //alert("当前定位城市:" + cityName);
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);

    }
}
</script>